<template>
  <div class="list-container">
    <el-form v-model="formData" :inline="true" class="search-panel">
      <el-form-item
        label-width="100px"
        class="search-time"
        label="考勤时间："
        prop="time"
      >
        <el-date-picker
          v-model="formData.startToEnd"
          style="width: 250px"
          type="daterange"
          range-separator="~"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-form-item label-width="120px" label="审核状态：">
        <el-select v-model="formData.status" placeholder="请选择">
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item style="width:100px;text-align:right;">
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="table-panel">
      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column type="index" align="center" width="55" label="序号"/>
        <el-table-column prop="attendanceTime" label="考勤时间" align="center"/>
        <el-table-column prop="attendanceNum" label="考勤人数" align="center"/>
        <el-table-column prop="referenceMonthlyWage" label="参考工资" align="center">
          <template slot-scope="scope">
            <div>￥{{ scope.row.referenceMonthlyWage }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="realMonthlyWage" label="实际工资" align="center">
          <template slot-scope="scope">
            <div>￥{{ scope.row.realMonthlyWage }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="审核状态" align="center"/>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-search"
              @click.native.prevent="checkRow(scope)"
            >查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row class="page">
        <div class="page-tag">
          共{{ Math.ceil(totalData / pageSize) }}页/{{ totalData }}条数据
        </div>
        <el-pagination
          :current-page.sync="currentPage"
          :page-sizes="[10, 20, 50]"
          :page-size="pageSize"
          :total="totalData"
          background
          layout="sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
          >
        </el-pagination>
      </el-row>
    </div>
  </div>
</template>

<script>
import workflowApi from '@/api/workflow/workFlow'
export default {
  data() {
    return {
      formData: {
        startToEnd: null,
        status: -1,
        mode: -1
      },
      statusOptions: [
        { value: -1, label: '全部' },
        { value: 0, label: '待提交' },
        { value: 1, label: '待审核' },
        { value: 2, label: '已审核' },
        { value: 3, label: '已驳回' }
      ],
      currentPage: 1,
      pageSize: 10,
      totalData: 0,
      tableData: [
        { attendanceTime: "2020/12",attendanceNum:157, referenceMonthlyWage:"8,716",realMonthlyWage:'1,130,400',status:'待提交',workflowId:'',projectId:1},
        // { attendanceTime: "2020/10",attendanceNum:157, referenceMonthlyWage:'8,716',realMonthlyWage:'1,130,400',status:'待提交',workflowId:'',projectId:1},
        // { attendanceTime: "2020/09",attendanceNum:157, referenceMonthlyWage:'8,716',realMonthlyWage:'1,130,400',status:'待提交',workflowId:'',projectId:1},
        // { attendanceTime: "2020/08",attendanceNum:157, referenceMonthlyWage:'8,716',realMonthlyWage:'1,130,400',status:'待提交',workflowId:'',projectId:1},
      ],
      params: {
        pageNum: 1,
        pageSize: 10,
        isAsc: 'desc'
      }
    }
  },
  created() {
    this.getTableListExamineWorkflowApply(this.params)
  },
  methods: {
    getTableListExamineWorkflowApply(params) {
      workflowApi.getExamineListWorkflow(params).then(res => {
        let that = this
        console.log(res)
        res.data.forEach(function(item, index) {
          that.giveDataToTableData(item)
        })
      })
    },
    giveDataToTableData(item){
      if(item.canCheck){
        const tableData = this.tableData
        let data=item.attachInfo.split("*")
        let that = this
        tableData.push({attendanceTime:data[0],
          attendanceNum:data[1],
          referenceMonthlyWage:data[2],
          realMonthlyWage:data[3],
          projectId:data[4],
          status:that.convertStatus(item.applyStatus),
          workflowApplyId:item.applyId}
        )
      }
    },
    onSubmit() {
      console.log(this.formData)
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getStatisticList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getStatisticList()
    },
    checkRow(res) {
      // console.log(res)
      this.$router.push('/approve/approve/reviewDetail/'+res.row.workflowApplyId)
    },
    handleSelectionChange() {},
    jump() {
      this.$router.push({ path: '/wage/month/list' })
    },
    convertStatus(status){
      let newStatus = "未知"
      switch (status){
        case '1': newStatus = "待审核";break;
        case '2': newStatus = "审核中";break;
        case '3': newStatus = "已审核";break;
        case '4': newStatus = "已驳回";break;        case '5': newStatus = "已撤回";break;
      }
      return newStatus
    }

  }
}
</script>
